<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./rule";
// 声明 props 类型
export interface FormProps {
  formInline: {
    title: string;
    nickname: string;
    username: number;
    password?: string;
    phone?: number;
    email?: string;
    sex?: number;
    depId?: number;
    remark?: string;
    userId?: number;
    status?: number;
  };
}
const ruleFormRef = ref();
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "",
    nickname: "",
    username: 0,
    password: "",
    phone: 0,
    email: "",
    sex: 0,
    depId: 0,
    remark: "",
    userId: 0,
    status: 0
  })
});
const sexOptions = [
  {
    value: "1",
    label: "男"
  },
  {
    value: "2",
    label: "女"
  }
];

const depOptions = [
  {
    value: 1,
    label: "人力资源部"
  },
  {
    value: 2,
    label: "财务部"
  },
  {
    value: 3,
    label: "销售部"
  },
  {
    value: 4,
    label: "研发部"
  }
];
const newFormInline = ref(props.formInline);
function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
</script>

<template>
  <el-form
    :model="newFormInline"
    ref="ruleFormRef"
    :rules="formRules"
    label-position="right"
    :inline="true"
    label-width="70"
  >
    <el-form-item label="昵称" prop="nickname">
      <el-input
        v-model="newFormInline.nickname"
        placeholder="请输入昵称"
        maxlength="10"
        clearable
        show-word-limit
      />
    </el-form-item>
    <el-form-item label="账号" prop="username">
      <el-input v-model="newFormInline.username" placeholder="请输入账号" />
    </el-form-item>
    <el-form-item
      label="密码"
      prop="password"
      v-if="newFormInline.title === '新增'"
    >
      <el-input
        v-model="newFormInline.password"
        type="password"
        placeholder="请输入密码"
      />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="newFormInline.email" placeholder="请输入邮箱" />
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="newFormInline.phone" placeholder="请输入电话" />
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select
        v-model="newFormInline.sex"
        placeholder="请选择性别"
        style="width: 350px"
      >
        <el-option
          v-for="item in sexOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="所属部门" prop="depId">
      <el-select
        v-model="newFormInline.depId"
        placeholder="请选择部门"
        style="width: 350px"
      >
        <el-option
          v-for="item in depOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item
      label="状态"
      prop="status"
      v-if="newFormInline.title === '新增'"
    >
      <el-switch
        v-model="newFormInline.status"
        class="ml-2"
        :active-value="1"
        :inactive-value="0"
        inline-prompt
        active-text="启用"
        inactive-text="禁用"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input
        type="textarea"
        maxlength="30"
        show-word-limit
        v-model="newFormInline.remark"
        placeholder="请输入备注"
      />
    </el-form-item>
  </el-form>
</template>

<style scoped>
.el-input__inner {
  width: 250px;
}
.el-form-item {
  width: 400px;
}
</style>
